{% extends 'base.html' %}

{% block content %}
<!-- ABAIXO SAO INCLUDES REFERENTES A BARRA DE PROGRESSO -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- FIM DOS INCLUDES -->
  
 <!-- BARRA DE PROGRESSO -->
	<script>
		var progresso = parseInt("{{exam}}");
		$(function() {
			$( "#progressbar" ).progressbar({
				value: progresso
			});
			
			$("#progressbar").ready(function() {  
				//display the current value  
				$("<p>").attr("id", "percentage").text($("#progressbar").progressbar("option","value") + "%").appendTo(".progress-label");                   
			});
			
			$(".progress-label").css({ opacity: 0.4 })
			
		});
	</script>
	<div id="progressbar"></div>
	<div style='float: left; opacity: 0.4'>Progresso: </div> 
	<div class="progress-label"></div>
<!-- FIM DA BARRA DE PROGRESSO -->
  
  <h2>{{ user_exam.exam }}</h2>
  {% if user_exam.exam.questions %}
    <ol>
      {% for question in user_exam.exam.questions.all %}
        <li><a href="/prova/{{user_exam.id}}/questao/{{question.id}}">{{ question.question }}</a>        
        </li>
      {% endfor %}
    </ol>
  {% else %}
    <p>Nenhuma questão cadastrada.</p>
  {% endif %}
{% endblock content %}